<template>
  <el-row class="toolbar" style="padding-bottom: 0px; margin-bottom: 0px">
    <div class="search-panel">
      <el-form :inline="true" class="search-form">
        <el-form-item
          v-for="(item, index) in searchData"
          :key="index"
          :label="item.type !== 'button' ? item.label && item.label : ''"
          :class="item.type == 'button' && 'w100'"
        >
          <template v-if="item.type === 'input'">
            <el-input v-model="item.value" :placeholder="item.placeholder" />
          </template>
          <template v-if="item.type === 'select'">
            <el-select
              v-model="item.value"
              :placeholder="item.placeholder"
              :filterable="item.filterable"
            >
              <el-option
                v-for="option in item.options"
                :key="option.value"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </template>
          <template v-if="item.type === 'date'">
            <el-date-picker
              v-model="item.value"
              :type="item.otherType ? item.otherType : 'date'"
              :placeholder="item.placeholder"
              value-format="yyyy-MM-dd"
            />
          </template>
          <template v-if="item.type === 'daterange'">
            <el-date-picker
              v-model="item.value"
              type="daterange"
              range-separator="-"
              :start-placeholder="
                item.startPlaceholder ? item.startPlaceholder : '开始日期'
              "
              :end-placeholder="
                item.endPlaceholder ? item.endPlaceholder : '结束日期'
              "
              value-format="yyyy-MM-dd"
            />
          </template>
          <template v-if="item.type === 'cascader'">
            <el-cascader
              size="large"
              :options="item.options"
              v-model="item.value"
              :disabled="item.disabled && item.disabled"
              :placeholder="
                !item.disabled ? (item.label ? item.label : '请选择') : ''
              "
              clearable
              @change="item.change && item.change"
            >
            </el-cascader>
          </template>
          <template v-if="item.type === 'wlTree'">
            <wlTreeSelect
              :checkbox="item.checkbox"
              :data="item.treeData"
              :defaultExpandAll="false"
              :disabled="item.disabled && item.disabled"
              :filterable="item.filterable ? true : false"
              :leaf="item.leaf ? true : false"
              :nowrap="true"
              :placeholder="item.placeholder ? item.placeholder : '请选择'"
              :props="{ label: 'label', value: 'id' }"
              :width="item.width && item.width"
              @change="
                (value) => {
                  item.change(value);
                }
              "
              style="width: 100%"
              v-model="item.value"
            />
          </template>
          <!-- <template v-if="item.type === 'button'">
            <el-row class="search-btns">
              <el-button
                v-for="(subItem, subIndex) in item.list"
                :key="subIndex"
                :type="subItem.class"
                @click="subItem.onlick(searchData)"
                >{{ subItem.label }}</el-button
              >
            </el-row>
          </template> -->
        </el-form-item>
      </el-form>
      <div class="search-btns">
        <div class="panel" v-for="(item, index) in searchData" :key="index">
          <template v-if="item.type === 'button'">
            <el-button
              v-for="(subItem, subIndex) in item.list"
              :key="subIndex"
              :type="subItem.class"
              :icon="subItem.icon"
              @click="subItem.onlick(searchData)"
              >{{ subItem.label }}</el-button
            >
          </template>
        </div>
      </div>
    </div>
  </el-row>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: ["searchData"],
  mounted() {},
  methods: {},
};
</script>

<style lang="scss">
.search-panel {
  display: flex;
  .w100 {
    display: none !important;
  }
  .search-form {
    flex: 1;
    .el-form-item__label {
      width: 110px;
    }
    .el-input__inner,
    .wl-tree-select {
      width: 240px !important;
    }
    .el-form-item {
      margin: 0 20px 20px 0;
    }
  }
  .search-btns {
    width: 105px;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: -20px;
      width: 1px;
      height: 74px;
      background: #e5e6eb;
    }
    .el-button {
      padding: 8px 20px;
      margin-bottom: 8px;
    }
  }
}
</style>
